<template>
  <div style="height: 100%;position: relative;">
    <div class="title">质量问题来源分布图</div>
    <el-row style="margin-top: 10px;">
      <el-col :span="5" :offset="8">
        <el-select size="mini" clearable v-model="projectId" placeholder="选择项目:全部" @change="getData">
          <el-option v-for="(item, index) in projectNameOptions" :label="item.label" :value="item.value"
            :key="index"></el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <el-date-picker v-model="dateRange" size="mini" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="getData">
        </el-date-picker>
      </el-col>
    </el-row>
    <div id="main2" style="width: 100%;height:calc(100% - 80px)"></div>
    <img src="@/assets/images/noData.png" class="nodataImg" v-if="!list.length" />
  </div>
</template>
<script>
import * as echarts from "echarts";
import { listDept } from "@/api/navbar";
import { getRiskTrendd } from "./api"
import { mapState } from "vuex";
export default {
  data() {
    return {
      projectNameOptions: [],
      projectId:this.$store.state.app.selectData,
      dateRange: [],
      list: [],
      chart: null,
    };
  },
  mounted() {
    this.getProjectNameOptions();
    this.initChart();
    this.getData();
  },
  methods: {
    async getProjectNameOptions() {
      this.projectNameOptions = [];
      const res = await listDept();
      const buffer = res.data.sort(function (a, b) {
        return b.id - a.id;
      });
      this.projectNameOptions = buffer.map((item) => {
        return { value: item.id, label: item.name };
      })
    },
    async getData() {
      const res = await getRiskTrendd({
        projectId: this.projectId,
        startDate: this.dateRange && this.dateRange.length ? this.dateRange[0] : null,
        endDate: this.dateRange && this.dateRange.length ? this.dateRange[1] : null,
      })
      this.list = res.map;
      let timeArr = []
      let arr = []
      this.list.forEach(item=>{
        if (timeArr.indexOf(item.mouth) =='-1') {
          timeArr.push(item.mouth)
          item.counts1 = '0'
          item.counts2 = '0'
          item.counts3 = '0'
          item.counts4 = '0'
          item.counts5 = '0'
          item.counts6 = '0'
          item.counts7 = '0'
          item.counts8 = '0'
          item.counts9 = '0'
          if (item.dataSource == '2') {
          item.counts1 = item.counts
          }else if (item.dataSource == '3'){
          item.counts2 = item.counts
          }else if (item.dataSource == '4'){
          item.counts3 = item.counts
          }else if (item.dataSource == '5'){
          item.counts4 = item.counts
          }else if (item.dataSource == '6'){
          item.counts5 = item.counts
          }else if (item.dataSource == '7'){
          item.counts6 = item.counts
          }else if (item.dataSource == '8'){
          item.counts7 = item.counts
          }else if (item.dataSource == '9'){
          item.counts8 = item.counts
          }
          arr.push(item)
        }else{
          if (item.dataSource == '2') {
            arr[timeArr.indexOf(item.mouth)].counts1 = item.counts
          }else if (item.dataSource == '3'){
            arr[timeArr.indexOf(item.mouth)].counts2 = item.counts
          }else if (item.dataSource == '4'){
            arr[timeArr.indexOf(item.mouth)].counts3 = item.counts
          }else if (item.dataSource == '5'){
            arr[timeArr.indexOf(item.mouth)].counts4 = item.counts
          }else if (item.dataSource == '6'){
            arr[timeArr.indexOf(item.mouth)].counts5 = item.counts
          }else if (item.dataSource == '7'){
            arr[timeArr.indexOf(item.mouth)].counts6 = item.counts
          }else if (item.dataSource == '8'){
            arr[timeArr.indexOf(item.mouth)].counts7 = item.counts
          }else if (item.dataSource == '9'){
            arr[timeArr.indexOf(item.mouth)].counts8 = item.counts
          }
        }
      })
      this.list = arr
      this.setOption();
    },
    initChart() {
      const chartDom = document.getElementById("main2");
      this.chart = echarts.init(chartDom);
    },
    setOption() {
      const option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["质量文件拆分", "业主检查", "监理检查", "质量监督部门检查", "项目自检", "公司检查", "自由检查", "计划任务", "其他"],
          top: '5%',
          textStyle: {
            color: '#ffffff'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.list.map((item) => item.mouth),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "质量文件拆分",
            type: "line",
            stack: "Total1",
            // data: [120, 132, 101, 134, 90, 230],
            data: this.list.map((item) => item.counts),
          },
          {
            name: "业主检查",
            type: "line",
            stack: "Total2",
            data: this.list.map((item) => item.counts1),
          },
          {
            name: "监理检查",
            type: "line",
            stack: "Total3",
            data: this.list.map((item) => item.counts2),
          },
          {
            name: "质量监督部门检查",
            type: "line",
            stack: "Total4",
            data: this.list.map((item) => item.counts3),
          },
          {
            name: "项目自检",
            type: "line",
            stack: "Total5",
            data: this.list.map((item) => item.counts4),
          },
          {
            name: "公司检查",
            type: "line",
            stack: "Total6",
            data: this.list.map((item) => item.counts5),
          },
          {
            name: "自由检查",
            type: "line",
            stack: "Total7",
            data: this.list.map((item) => item.counts6),
          },
          {
            name: "计划任务",
            type: "line",
            stack: "Total8",
            data: this.list.map((item) => item.counts7),
          },
          {
            name: "其他",
            type: "line",
            stack: "Total9",
            data: this.list.map((item) => item.counts8),
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
   watch: {
    app: {
      handler(newVal, oldVal) {
        this.projectId = newVal.selectData;
        this.getData();
      },
      deep: true,
    },
  },
  computed: {
    ...mapState(["app"]),
  },
};
</script>
<style scoped  lang="scss">
.title {
  padding: 5px;
}

.nodataImg {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 30%;
  left: 40%;
}

::v-deep .el-input__inner {
  background-color: transparent !important;
}

::v-deep .el-date-editor--daterange.el-input__inner {
  width: auto;
  border-color: rgba(117, 122, 130);
  color: rgb(117, 122, 130);
}

/**修改边框和字体颜色 */
::v-deep .el-select {
  position: relative;
  width: 160px;

  .el-input {
    input {
      border-color: rgba(117, 122, 130);
      color: rgb(117, 122, 130);
    }
  }
}

::v-deep .el-range-input {
  background-color: transparent !important;
}
</style>
